<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-flex.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.2.0.css" />
</head>
<body>
    <div id="app">
        <div class="aui-margin-t-5">
            <ul class="aui-list aui-media-list" v-if="token">
                <li class="aui-list-item aui-list-item-middle">
                    <div class="aui-media-list-item-inner">
                        <div class="aui-list-item-media" style="width: 3rem;">
                            <img src="../image/th1.png">
                        </div>
                        <div class="aui-list-item-inner aui-list-item-arrow">
                            <div class="aui-list-item-text">
                                <div>
                                    <span class="aui-list-item-title aui-font-size-14">{{ minfo.mobile }}</span>
                                    <img src="../image/icon_shiming.png" style="width: 14px;height: 14px;">
                                    <img src="../image/icon_zizhi.png" style="width: 14px;height: 14px;">
                                </div>
                            </div>
                            <div class="aui-list-item-text aui-font-size-12">
                                账户余额：{{ minfo.money }}
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
            <ul class="aui-list aui-media-list" onclick="open_login()" v-else>
                <li class="aui-list-item aui-list-item-middle">
                    <div class="aui-media-list-item-inner">
                        <div class="aui-list-item-media" style="width: 3rem;">
                            <img src="../image/th1.png">
                        </div>
                        <div class="aui-list-item-inner aui-list-item-arrow">
                            <div class="aui-list-item-text">
                                <div>
                                    <span class="aui-list-item-title aui-font-size-14">老孟学堂欢迎你</span>
                                </div>
                            </div>
                            <div class="aui-list-item-text aui-font-size-12">
                                暂未登录，请登录
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

        <div class="aui-margin-t-10 white-bg">
            <div class=" aui-margin-l-10 aui-margin-r-10 aui-border-b">
                <div class="aui-flex-col aui-flex-middle tab-height">
                    <img src="../image/me_icon_collect.png" class="icon-me-l">
                    <span class="aui-margin-l-10 aui-font-size-14">我的收藏</span>
                </div>
            </div>
            <div class=" aui-margin-l-10 aui-margin-r-10 aui-border-b">
                <div class="aui-flex-col aui-flex-middle tab-height">
                    <img src="../image/me_icon_moving.png" class="icon-me-l">
                    <span class="aui-margin-l-10 aui-font-size-14">我的圈子</span>
                </div>
            </div>
            <div class=" aui-margin-l-10 aui-margin-r-10 aui-border-b">
                <div class="aui-flex-col aui-flex-middle tab-height">
                    <img src="../image/me_icon_dingdan.png" class="icon-me-l">
                    <span class="aui-margin-l-10 aui-font-size-14">会员管理</span>
                </div>
            </div>
            <div class=" aui-margin-l-10 aui-margin-r-10" @click="loginout()" v-if="token">
                <div class="aui-flex-col aui-flex-middle tab-height">
                    <img src="../image/me_icon_revise.png" class="icon-me-l">
                    <span class="aui-margin-l-10 aui-font-size-14">退出</span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script src="../script/api.js"></script>
<script src="../script/common.js"></script>
<script src="../script/vue.js"></script>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            token: '',
            minfo: [],
        },
        methods: {
            init: function () {
                console.log(vm.token);
                vm.token = $api.getStorage('token');
                vm.minfo = $api.getStorage('minfo');
            },
            loginout: function () {
                api.ajax({
                    url: loginout_url,
                    method: 'post',
                    timeout: 30,
                    dataType: 'json',
                    returnAll: false,
                    data: {
                        values: {
                            token: vm.token,
                            deviceid: api.deviceid
                        },
                    }
                }, function (ret, err) {
                    if (ret) {
                        if(ret.status == 1){
                            $api.setStorage('token',null);
                            $api.setStorage('minfo',null);
                            vm.init();
                        }else{
                            alert(ret.msg);
                        }
                        console.log(JSON.stringify(ret));
                    } else {
                        console.log(JSON.stringify(err));
                    }
                });
            }
        }
    });
    function open_login() {
        api.openWin({
            name: 'login_win',
            url: 'widget://html/login_win.html',
        });
    }
    apiready = function () {
        vm.init();
        api.setRefreshHeaderInfo({
            visible: true,
            loadingImg: 'widget://image/refresh.png',
            bgColor: '#ccc',
            textColor: '#fff',
            textDown: '下拉刷新...',
            textUp: '松开刷新...',
            showTime: true
        }, function (ret, err) {
            vm.init();
            setTimeout("api.refreshHeaderLoadDone()", '500');
        });

        //事件监听
        api.addEventListener({
            name: 'usercenter_init'
        }, function (ret, err) {
            console.log('触发了用户信息的初始化');
            vm.init();
        });
    };
</script>
